<template>
    <Modal v-model="visible" title="登录test" :mask-closable="false" :before-close="beforeModalClose">
        <Form ref="formRef" :model="formValidate" :rules="formRules" :label-width="80">
            <Form-item label="账号" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入"></Input>
            </Form-item>
            <Form-item label="密码" prop="pwd">
                <Input v-model="formValidate.pwd" placeholder="请输入" type="password" password></Input>
            </Form-item>
        </Form>
        <div slot="footer" style="text-align: center">
            <Button :loading="isSubmit" type="text" @click="onClose()">取消</Button>
            <Button :loading="isSubmit" type="primary" @click="onSubmit()">提交</Button>
            <Button :loading="isSubmit" @click="onReset()">重置</Button>
        </div>
    </Modal>
</template>

<script lang="ts">
import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
import { Form } from 'view-design'
@Component({})
export default class LoginForm extends Vue {
    @Prop({ default: false }) readonly value!: boolean
    @Ref() readonly formRef!: Form

    get visible() {
        return this.value
    }

    set visible(val) {
        this.formRef.resetFields()
        this.$emit('input', val)
    }

    isSubmit: boolean = false

    formValidate = {
        name: '',
        pwd: '',
    }

    formRules = {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        pwd: [{ required: true, message: '不能为空', trigger: 'blur' }],
    }

    beforeModalClose() {
        if (this.isSubmit) {
            return Promise.reject(new Error('please wait for a minute'))
        } else {
            return Promise.resolve()
        }
    }

    onClose() {
        this.visible = false
    }

    onSubmit() {
        this.formRef.validate((valid) => {
            if (valid) {
                this.isSubmit = true
                console.log({ ...this.formValidate })
                setTimeout(() => {
                    this.isSubmit = false
                    this.$Message.success('假装登录成功啦')
                    this.onClose()
                    this.$store.dispatch('user/login', 'abcdefg1234567890')
                }, 300)
            }
        })
    }

    onReset() {
        this.formRef.resetFields()
    }
}
</script>
